<script setup>
import {inject, reactive, ref} from 'vue'
import {useRouter} from 'vue-router'
import axios from 'axios'
import {ElMessage} from 'element-plus'

const getPath = inject('getPath')

const router = useRouter()

const ruleFormRef = ref()
// 保存输入框输入的内容
const ruleForm = reactive({
  id: 0,
  name: '',
  sex: '0',
  no: '',
  password: '',
  age: '',
  phone: '',
  roleId: '1',
  isValid: "Y"
})

//名字
const validatName = (rule, value, callback) => {
  let regx = /^[\u4E00-\u9FA5]{2,5}$/
  if (value === '') {
    callback(new Error('用户名不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的用户名'))
  } else {
    callback()
  }
}
//账号
const validatNo = (rule, value, callback) => {
  let regx = /[\u4e00-\u9fa5_a-zA-Z_0-9_]{1,10}$/
  if (value === '') {
    callback(new Error('账号不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的账号'))
  } else {
    callback()
  }
}
// 密码
const validatPassword = (rule, value, callback) => {
  var regx = /^[A-Za-z0-9]\w{5,15}$/
  if (value === '') {
    callback(new Error('密码不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的密码格式（6到16位有字母数字组成）'))
  } else {
    callback()
  }
}
// 年龄
const validatAge = (rule, value, callback) => {
  var regx = /^[1-9]\w{0,1}$/
  if (value === '') {
    callback(new Error('年龄不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的年龄格式（1到99）'))
  } else {
    callback()
  }
}
// 电话
const validatPhone = (rule, value, callback) => {
  var regx = /^[1-9]+[0-9]\w{9}$/
  if (value === '') {
    callback(new Error('电话不能为空'))
  } else if (regx.test(value) == false) {
    callback(new Error('请输入正确的电话格式（11位数字组成）'))
  } else {
    callback()
  }
}
// 给输入框添加验证
const rules = reactive({
  name: [{validator: validatName, trigger: 'blur'}],
  no: [{validator: validatNo, trigger: 'blur'}],
  password: [{validator: validatPassword, trigger: 'blur'}],
  age: [{validator: validatAge, trigger: 'blur'}],
  phone: [{validator: validatPhone, trigger: 'blur'}]
})

const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      axios.post(`${getPath}register`, ruleForm).then(res => {
        if (res.data.code == 200) {
          ElMessage({
            message: res.data.msg,
            type: 'success',
          })
          router.push('/login')
        } else {
          ElMessage({
            message: res.data.msg,
            type: 'error',
          })
        }
      })
    } else {
      console.log('error submit!')
    }
  })
}


const goLogin = () => {
  // 跳转注册页面
  console.log(router);
  router.push('/login')
}

</script>
<template>
  <div class="register">
    <div class="register-bg">
      <div class="register-form">
        <div class="logo">
          <img src="../assets/register.webp" alt="">
        </div>
        <div class="form-box">
          <el-form ref="ruleFormRef" style="max-width: 600px" :model="ruleForm" status-icon :rules="rules"
                   label-width="auto" class="demo-ruleForm">

            <el-form-item label="账号" prop="no">
              <el-col :span="20">
                <el-input v-model="ruleForm.no" autocomplete="off" placeholder="请输入账号"/>
              </el-col>
            </el-form-item>
            <el-form-item label="姓名" prop="name">
              <el-col :span="20">
                <el-input v-model="ruleForm.name" autocomplete="off" placeholder="请输入姓名"/>
              </el-col>
            </el-form-item>
            <el-form-item label="密码" prop="password">
              <el-col :span="20">
                <el-input type="password" v-model="ruleForm.password" autocomplete="off " placeholder="请输入密码"/>
              </el-col>
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-col :span="20">
                <el-input v-model="ruleForm.age" autocomplete="off" placeholder="请输入年龄"/>
              </el-col>
            </el-form-item>
            <el-form-item label="性别" prop="sex">
              <el-radio-group v-model="ruleForm.sex" autocomplete="off">
                <el-radio value="1">男</el-radio>
                <el-radio value="0">女</el-radio>
              </el-radio-group>
            </el-form-item>
            <el-form-item label="电话" prop="phone">
              <el-col :span="20">
                <el-input maxlength="11" v-model="ruleForm.phone" autocomplete="off" placeholder="请输入电话"/>
              </el-col>
            </el-form-item>


            <el-form-item>
              <el-button type="primary" @click="submitForm(ruleFormRef)">
                立即注册
              </el-button>
              <el-button @click="goLogin">去登录</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped>
img {
  width: 100%;
  height: 100%;
}

.register-bg {
  width: 100%;
  height: 928px;
  background-image: url('../assets/bg.jpeg');
  background-repeat: no-repeat;
  background-size: 100%;
  display: flex;
  align-items: center;
}

.register-form {
  width: 600px;
  height: 550px;
  background-color: white;
  margin: 0 auto;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .15);
  border-radius: 40px;
  background-color: gray;
  background-image: linear-gradient(to right, black, gray);
}

.logo {
  width: 150px;
  height: 150px;
  margin-left: 50px;
  margin-right: 50px;

}

</style>